<!DOCTYPE html>

<!--
  Copyright 2020 The CodeWorld Authors. All rights reserved.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<html>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.find,Number.isFinite,Number.isInteger,console,console.log,document.head,performance.now"></script>
    <title>CodeWorld</title>
    <link rel="stylesheet" href="css/codemirror.css" />
    <link rel="stylesheet" href="css/ambiance.css" />
    <link rel="stylesheet" href="css/theme-variables.css" />
    <link rel="stylesheet" href="css/codeworld.css" />
    <link rel="stylesheet" href="css/lint.css" />
    <link rel="stylesheet" href="css/show-hint.css" />
    <link rel="stylesheet" href="css/codeworld-cm.css" />
    <link rel="stylesheet" href="css/codeExplorer.css" />
    <link rel="stylesheet" href="css/directoryTree.css" />
    <link
      rel="stylesheet"
      href="mirrored/cdn.materialdesignicons.com/3.6.95/css/materialdesignicons.min.css"
    />
    <link
      rel="stylesheet"
      href="mirrored/ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"
    />
  </head>

  <body>
    <div class="root">
      <div class="ui-layout-container">
        <div id="nav" class="dropbox ui-layout-west">
          <div class="nav_items">
            <a id="newFolderButton" class="cw-button red">
              <i class="mdi mdi-18px mdi-folder"></i>&nbsp; New Folder
            </a>
            <a id="newButton" class="cw-button red">
              <i class="mdi mdi-18px mdi-plus"></i>&nbsp; New
            </a>
            <a id="saveButton" class="cw-button blue" style="display: none">
              <i class="mdi mdi-18px mdi-cloud-upload"></i>&nbsp; Save
            </a>
            <a id="saveAsButton" class="cw-button blue">
              <i class="mdi mdi-18px mdi-dots-horizontal"></i>&nbsp; Save As
            </a>
            <a id="deleteButton" class="cw-button red" style="display: none">
              <i class="mdi mdi-18px mdi-delete"></i>&nbsp; Delete
            </a>
            <a id="downloadButton" class="cw-button blue" style="display: none">
              <i class="mdi mdi-18px mdi-download"></i>&nbsp; Download
            </a>
          </div>
          <div id="directoryTree"></div>
        </div>

        <form id="source" class="dropbox ui-layout-center">
          <textarea id="editor" placeholder="Type your code here..."></textarea>
        </form>

        <div id="result" style="display: none" class="ui-layout-east">
          <div class="runner-box">
            <div id="obsolete-code-alert" class="obsolete-code-alert-fadeout">
              Changes detected. Press 'Run' button to compile your current code.
            </div>
            <iframe
              id="runner"
              class="dropbox"
              sandbox="allow-scripts allow-modals"
            ></iframe>
          </div>
          <pre id="message" class="dropbox"></pre>
          <section
            class="code-explorer dropbox"
            style="display: none"
          ></section>
        </div>
      </div>
      <div id="toolbar">
        <div id="buttons">
          <a id="navButton" class="cw-button blue" style="display: none"
            ><i class="mdi mdi-18px mdi-menu"></i
          ></a>
          <a id="signin" class="cw-button blue"
            ><i class="mdi mdi-18px mdi-login"></i>&nbsp; Sign In</a
          >
          <a id="signout" class="cw-button blue" style="display: none"
            ><i class="mdi mdi-18px mdi-logout"></i>&nbsp; Sign Out</a
          >
          <a id="docButton" class="cw-button blue"
            ><i class="mdi mdi-18px mdi-book-open-variant"></i>&nbsp; Guide</a
          >
          <a
            id="bugButton"
            class="cw-button blue"
            target="_blank"
            href="https://github.com/google/codeworld/issues/new?template=bug_report.md"
            ><i class="mdi mdi-18px mdi-bug"></i>&nbsp; Report a Bug</a
          >
          <a
            id="toggleThemeButton"
            class="cw-button blue theme-marker-day"
            title="Toggle theme"
            target="_blank"
            ><i class="mdi mdi-18px mdi-weather-sunny"></i
          ></a>
        </div>
        <span></span>
        <div id="runButtons">
          <a
            id="shareFolderButton"
            class="cw-button yellow"
            style="display: none"
            ><i class="mdi mdi-18px mdi-folder-outline"></i>&nbsp; Share
            Folder</a
          >
          <span
            ><i
              class="mdi mdi-24px mdi-record"
              style="display: none"
              id="recordIcon"
            >
              <!--Recording Icon--></i
            ></span
          >
          <a id="startRecButton" style="display: none" class="cw-button red"
            ><i class="mdi mdi-18px mdi-record"></i>&nbsp; Start Recording</a
          >
          <a id="stopRecButton" style="display: none" class="cw-button yellow"
            ><i class="mdi mdi-18px mdi-stop"></i>&nbsp; Stop Recording</a
          >
          <a id="shareButton" class="cw-button yellow" style="display: none"
            ><i class="mdi mdi-18px mdi-share"></i>&nbsp; Share</a
          >
          <a
            id="inspectButton"
            class="inspect-button cw-button cyan"
            style="display: none"
            ><i class="mdi mdi-18px mdi-magnify"></i>&nbsp; Inspect</a
          >
          <a id="stopButton" class="cw-button red"
            ><i class="mdi mdi-18px mdi-stop"></i>&nbsp; Stop</a
          >
          <a id="runButton" class="cw-button green"
            ><i class="mdi mdi-18px mdi-play"></i>&nbsp; Run</a
          >
        </div>
      </div>
    </div>

    <script
      src="mirrored/code.jquery.com/jquery-1.12.4.min.js"
      integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
      crossorigin="anonymous"
    ></script>
    <script
      src="mirrored/code.jquery.com/ui/1.12.0/jquery-ui.min.js"
      integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
      crossorigin="anonymous"
    ></script>
    <script
      type="text/javascript"
      src="mirrored/cdnjs.cloudflare.com/ajax/libs/jquery-layout/1.4.3/jquery.layout_and_plugins.min.js"
    ></script>
    <script
      type="text/javascript"
      src="mirrored/cdnjs.cloudflare.com/ajax/libs/jqtree/1.4.10/tree.jquery.js"
    ></script>
    <script type="text/javascript" src="//wurfl.io/wurfl.js"></script>
    <script
      type="text/javascript"
      src="js/codemirror-compressed.js"
      charset="UTF-8"
    ></script>
    <script
      type="text/javascript"
      src="js/codemirror-buttons/buttons.js"
    ></script>
    <script
      type="text/javascript"
      src="js/details-element-polyfill.js"
    ></script>
    <script type="text/javascript" src="js/codeworld-mode.js"></script>
    <script type="module" src="js/codeworld.js"></script>
    <script
      type="text/javascript"
      src="mirrored/cdn.jsdelivr.net/npm/promise-polyfill@7.1.0/dist/promise.min.js"
    ></script>
    <script async src="js/diff.min.js"></script>
  </body>
</html>
